<template>
  <div class="margin-top-10">
    <tabs style="overflow: visible;z-index: 100;">
      <tab-pane label="按姓名检索">
        <Row type="flex">
          <DatePicker
            type="daterange"
            v-model="queryDateRange"
            placeholder="选择时间段"
            format="yyyy-MM-dd"
            style="width: 300px;margin-right:8px"
          ></DatePicker>
          <Input
            v-model="queryName"
            @on-enter="searchRecord()"
            placeholder="请输入姓名..."
            style="width:150px;margin-right:8px"
          />
          <Button @click="searchRecord" type="primary">查询</Button>
        </Row>
        <Row type="flex" style="margin-top: 20px">
          <SerachResult
            v-for="(item,index) in tracks"
            :key="index"
            :xiangsidu="item.fms_score"
            :time="item.rec_time"
            :location="item.ipc_name"
            :img-src="item.rec_capture[0]"
          />
        </Row>
      </tab-pane>
      <tab-pane label="以图找图">
        <Row type="flex" justify="start">
          <DatePicker
            type="daterange"
            v-model="queryDateRange_1"
            placeholder="选择时间段"
            format="yyyy-MM-dd"
            style="width: 300px;"
          />
          <Slider
            v-model="precision"
            style="width: 300px; margin-left: 50px"
            :tip-format="sliderShow"
          ></Slider>
        </Row>
        <Row type="flex" style="margin-top: 5px">
          <Row type="flex" style="width: 300px;border-radius:3%;background: white" justify="center">
            <ImageInput ref="imageInput" style="margin: 5px"/>
          </Row>
          <Row style="margin-left: 5px">
            <Button
              @click="searchRecordByPic"
              type="primary"
              style="height: 30px;align:bottom;margin-top: 90px"
            >开始检索</Button>
          </Row>
        </Row>
        <Row type="flex" style="margin-top: 20px">
          <SerachResult
            v-for="(item,index) in tracks_1"
            :key="index"
            :xiangsidu="item.fms_score"
            :time="item.rec_time"
            :location="item.ipc_name"
            :img-src="item.rec_capture[0]"
          />
        </Row>
      </tab-pane>
    </tabs>
  </div>
</template>

<script>
import TimeUtils from "@/libs/time.js";
import ME from "src/controllers/track.js";
import Uploader from "../weiget/uploader";
import SerachResult from "./components/serachResult";
import SerachByPic from "./components/serachByPic";
import TimePickerUtils from "src/libs/time-picker-utils";
import Tabs from "iview/src/components/tabs/tabs";
import TabPane from "iview/src/components/tabs/pane";
import ImageInput from "src/components/image-input/image-input";

export default {
  components: {
    TabPane,
    Tabs,
    Uploader,
    SerachResult,
    SerachByPic,
    ImageInput
  },
  name: "",
  data() {
    return {
      tracks: [],
      tracks_1: [],
      queryName: "",
      queryDateRange: "",
      queryDateRange_1: "",
      precision: 50
    };
  },
  created() {},
  methods: {
    searchRecord() {
      let params = {
        user_name: this.queryName
      };
      let { dateFrom, dateTo } = TimePickerUtils.changeTime(
        this.queryDateRange
      );
      params.date_from = dateFrom;
      params.date_to = dateTo;
      ME.loadData(params).then(json => {
        if (json.code == 0) {
          this.tracks = json.data;
        }
      });
    },
    showModal() {
      this.$refs["modal"].showIt();
    },
    get_visible_state(state) {
      if (state) {
        return "";
      } else {
        return "none";
      }
    },
    onSelect(imgSrc) {
      this.searchRecord(imgSrc);
    },
    searchRecordByPic() {
      let params = {
        user_avatar: this.$refs["imageInput"].getImage()
      };
      let { dateFrom, dateTo } = TimePickerUtils.changeTime(
        this.queryDateRange_1
      );
      params.date_from = dateFrom;
      params.date_to = dateTo;
      params.precision = this.precision.toString();
      ME.loadData(params).then(json => {
        if (json.code == 0) {
          this.tracks_1 = json.data;
        }
      });
    },
    sliderShow() {
      return "阈值：" + this.precision + "%";
    }
  }
};
</script>
<style lang="less">
@import "../../styles/common.less";
</style>
<style scoped>
.content {
  font-size: 14px;
  font-weight: bold;
}

.picContent {
}

.picContent img {
  margin: 10px;
  width: 100px;
  height: 100px;
}
</style>